<template>
  <div>
    <el-dialog
      :title="title"
      :visible="visible"
      @close="closeModel"
      class="media-dialog"
    >
      <div v-if="type == 'image' || type == 'default'" class="img-container">
        <el-image :src="url" :preview-src-list="[url]"></el-image>
      </div>
      <div v-if="type == 'video'" class="video-container">
        <video :src="url" autoplay controls width="700px"></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'PreviewMedia',
    props: {
      visible: Boolean,
      url: String,
      title: String,
    },
    components: {},
    data() {
      return {}
    },
    computed: {
      type() {
        let file = this.url.split('.').pop()
        console.log('file :>> ', file)
        const imageType = ['jpg', 'jpeg', 'JPG', 'JPEG', 'png', 'PNG', 'webp']
        const videoType = ['mp4', 'MP4', 'MPEG4', 'flv', 'webm', 'mov']
        if (videoType.includes(file)) {
          return 'video'
        }
        if (imageType.includes(file)) {
          return 'image'
        }
        return 'default'
      },
    },
    watch: {},
    created() {
      console.log('previewMedia model:>> ', this.type, this.url)
    },
    mounted() {},
    methods: {
      closeModel() {
        console.log('close user model :>> ')
        this.$emit('closeModel')
      },
    },
  }
</script>
<style scoped lang="less">
  .media-dialog {
    // width: fit-content;
    .img-container {
      display: flex;
      justify-content: center;
    }
    .video-container {
      display: flex;
      justify-content: center;
    }
  }
</style>
